תמיכה בשפת סגנון CSS Counter: עיצוב בינלאומי לקהלים גלובליים

בעולם המחובר גלובלית של ימינו, מפתחי אתרים צריכים ליצור אתרים ואפליקציות הנותנים מענה לקהלים מגוונים. זה אומר לקחת בחשבון לא רק את השפה אלא גם את המוסכמות התרבותיות ומערכות המספור הנהוגות באזורים שונים. סגנונות CSS counter מספקים מנגנון רב עוצמה לעיצוב רשימות ותוכן ממוספר אחר באופן המכבד את הניואנסים התרבותיים הללו. מדריך מקיף זה יבחן את היכולות של סגנונות CSS counter לבינאום (i18n) וידגים כיצד להשתמש בהם ביעילות.

הבנת סגנונות CSS Counter

CSS counters הם משתנים המתוחזקים על ידי כללי CSS כדי לעקוב אחר מספר הפעמים שהם נמצאים בשימוש. הם משמשים בעיקר למספור רשימות, כותרות ואלמנטים אחרים. סגנונות CSS counter מרחיבים פונקציונליות זו בכך שהם מאפשרים לך להגדיר מערכות מספור מותאמות אישית מעבר לספרות הערביות והרומיות הסטנדרטיות. זה חיוני לתמיכה בשפות שונות ובהעדפות תרבותיות.

מאפייני ה-CSS העיקריים הכרוכים בשימוש בסגנונות counter הם:

• counter-reset: מאתחל או מאפס מונה לערך מסוים.
• counter-increment: מגדיל את ערכו של מונה.
• content: משמש עם פסאודו-אלמנטים ::before או ::after כדי להציג את ערכו של המונה.
• counter() או counters(): פונקציות המשמשות בתוך המאפיין content לעיצוב ערכו של המונה.
• @counter-style: מגדיר סגנון מונה מותאם אישית עם מאפיינים שונים לשליטה בעיצוב.

העוצמה של @counter-style

הכלל @counter-style הוא הלב של הבינאום של סגנון CSS counter. הוא מאפשר לך להגדיר מערכת מספור מותאמת אישית עם מאפיינים שונים השולטים באופן הצגת ערך המונה. בואו נבחן את מאפייני המפתח בתוך הכלל @counter-style:

• system: מציין את האלגוריתם המשמש ליצירת ייצוג המונה. ערכים נפוצים כוללים cyclic, numeric, alphabetic, symbolic, fixed ו-additive.
• symbols: מגדיר את הסמלים המשמשים את סגנון המונה, כגון מספרים, אותיות או תווים מותאמים אישית.
• additive-symbols: משמש עם המערכת additive כדי להגדיר סמלים וערכיהם המספריים המתאימים.
• suffix: מציין את הטקסט המצורף אחרי כל ייצוג מונה (לדוגמה, נקודה או סוגריים סוגרים).
• prefix: מציין את הטקסט המצורף לפני כל ייצוג מונה.
• range: מגביל את טווח הערכים שעבורם סגנון המונה ישים.
• pad: מציין את המספר המינימלי של ספרות שיש להשתמש בהן, ומוסיף אפסים מובילים במידת הצורך.
• speak-as: שולט באופן שבו ערך המונה מוכרז על ידי קוראי מסך לצורך נגישות.
• fallback: מציין סגנון מונה חלופי שיש להשתמש בו אם הסגנון הנוכחי אינו נתמך על ידי הדפדפן.

דוגמאות בינאום עם @counter-style

כעת, בואו נחקור כמה דוגמאות מעשיות לשימוש ב-@counter-style לעיצוב מונים עבור שפות והקשרים תרבותיים שונים.

1. ספרות ערביות עם ספרות ערביות-הודיות

בעוד שספרות ערביות (0-9) נמצאות בשימוש נרחב, אזורים רבים דוברי ערבית מעדיפים להשתמש בספרות ערביות-הודיות (٠‎-٩‎). אנו יכולים ליצור סגנון מונה כדי להשיג זאת:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

קוד זה מגדיר סגנון מונה בשם arabic-indic המשתמש בספרות ערביות-הודיות כסמלים. המאפיין suffix מוסיף נקודה ורווח אחרי כל מספר. לאחר מכן, ה-CSS מחיל סגנון זה על רשימה ממוספרת (<ol>) כדי להציג את המספרים בפורמט ערבי-הודי.

2. ספרות רומיות (אותיות גדולות ואותיות קטנות)

ספרות רומיות נפוצות בהקשרים שונים, וסגנונות CSS counter יכולים להתמודד איתן בקלות:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

דוגמה זו מדגימה כיצד ליצור סגנונות מונה של ספרות רומיות באותיות רישיות (upper-roman) וקטנות (lower-roman). לאחר מכן, תוכל להחיל סגנונות אלה על רשימות שונות באמצעות מחלקות CSS (.upper-roman ו-.lower-roman). לדוגמה:

<ol class="upper-roman">
  <li>פריט 1</li>
  <li>פריט 2</li>
  <li>פריט 3</li>
</ol>

<ol class="lower-roman">
  <li>פריט 1</li>
  <li>פריט 2</li>
  <li>פריט 3</li>
</ol>

3. ספרות גאורגיות

ספרות גאורגיות משתמשות במערכת ייחודית של אותיות. אנו יכולים להגדיר סגנון מונה לייצוג מספרים בגאורגית:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

דוגמה זו משתמשת במערכת fixed מכיוון שלמערכת המספור הגאורגית יש קבוצה מוגבלת של סמלים עבור 33 המספרים הראשונים. המאפיין range מגביל את סגנון המונה לערכים בין 1 ל-33. עבור מספרים גדולים מ-33, יהיה עליך ליישם לוגיקה מורכבת יותר או מערכת מספור שונה.

4. ספרות ארמניות

בדומה לגאורגית, ספרות ארמניות משתמשות גם באותיות לייצוג מספרים:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

דוגמה זו דומה לדוגמה הגאורגית, תוך שימוש במערכת fixed והגדרת האותיות הארמניות כסמלים. ה-range מוגדר ל-1-39, המכסה את סט הספרות הארמניות הבסיסי.

5. ספרות CJK (סינית, יפנית, קוריאנית)

ספרות CJK מציעות מורכבות רבה יותר, עם צורות שונות עבור הקשרים רשמיים ולא רשמיים, ורמות גרעיניות שונות. בואו נסתכל על סינית מפושטת:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

שים לב שזהו ייצוג מפושט. תמיכה מלאה בספרות CJK, במיוחד עבור מספרים גדולים יותר, תדרוש יישום מורכב יותר הכולל את המערכת additive וטיפול בערכי מקום (עשרות, מאות, אלפים וכו'). קוד זה מדגים ייצוג ספרות בסיסי.

טכניקות מתקדמות ושיקולים

1. שילוב סגנונות Counter

אתה יכול לשלב מספר סגנונות counter כדי ליצור ערכות מספור מורכבות יותר. לדוגמה, אתה עשוי להשתמש במונה ראשי עבור פרקים ובמונה משני עבור חלקים בתוך כל פרק.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

קוד זה יוצר מערכת מספור היררכית שבה הפרקים ממוספרים ברצף, והחלקים ממוספרים בתוך כל פרק (לדוגמה, 1.1, 1.2, 2.1, 2.2).

2. שיקולי נגישות

ודא שסגנונות ה-counter שלך נגישים למשתמשים עם מוגבלויות. השתמש במאפיין speak-as כדי לשלוט באופן שבו ערך המונה מוכרז על ידי קוראי מסך. לדוגמה:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

המאפיין speak-as: numbers; אומר לקורא המסך להכריז על ערך המונה כמספר. אפשרויות אחרות כוללות spell-out (לאיות את המספר) ו-bullets (להכריז על המונה כנקודות תבליט).

בנוסף, ספק טקסט חלופי או תיאורים עבור כל סמל מותאם אישית המשמש בסגנונות ה-counter שלך כדי להבטיח שמשתמשים עם לקויות ראייה יוכלו להבין את המשמעות של התוכן הממוספר.

3. תאימות דפדפן

בעוד שסגנונות CSS counter נתמכים באופן נרחב על ידי דפדפנים מודרניים, חיוני לקחת בחשבון גרסאות דפדפן ישנות יותר. השתמש במאפיין fallback כדי לציין סגנון מונה חלופי שישמש אם הדפדפן אינו תומך בסגנון הראשי. לדוגמה:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

בדוגמה זו, אם הדפדפן אינו תומך במערכת cyclic או בסמלים המותאמים אישית, הוא יחזור לסגנון הרשימה disc.

4. רגישות תרבותית

בעת יישום סגנונות counter עבור שפות ותרבויות שונות, הקפד על רגישויות תרבותיות. חקור את מוסכמות המספור והסמלים המתאימים המשמשים בכל אזור. הימנע משימוש בסמלים או בפורמטים שעלולים להיות פוגעניים או לא הולמים.

לדוגמה, תרבויות מסוימות עשויות להעדיף להשתמש בסימני פיסוק או מפרידים שונים במערכות המספור שלהן. ודא שסגנונות ה-counter שלך מכבדים את ההעדפות הללו.

יישומים מעשיים ומקרי שימוש

ניתן להשתמש בסגנונות CSS counter במגוון רחב של תרחישי פיתוח אתרים, כולל:

• יצירת תוכן עניינים: מספור אוטומטי של כותרות וכותרות משנה בתוכן עניינים.
• יצירת רשימות ממוספרות: עיצוב רשימות ממוספרות בשפות וסגנונות שונים.
• מספור שלבים במדריך: הנח את המשתמשים בסדרה של שלבים עם מספור ברור ומושך מבחינה ויזואלית.
• יישום עימוד מותאם אישית: יצירת פקדי עימוד מותאמים אישית עם ערכות מספור ייחודיות.
• הצגת רשימות מדורגות: הצגת דירוגים בצורה מושכת מבחינה ויזואלית באמצעות סגנונות counter שונים.
• יצירת מסמכים משפטיים: עיצוב מסמכים משפטיים עם דרישות מספור ספציפיות.
• עיצוב מאמרים מדעיים: הצגת משוואות, איורים וטבלאות עם מספור מתאים.

שיטות עבודה מומלצות לשימוש בסגנונות CSS Counter

כדי להבטיח שסגנונות ה-CSS counter שלך יהיו יעילים וקלים לתחזוקה, פעל לפי שיטות העבודה המומלצות הבאות:

• השתמש בשמות תיאוריים עבור סגנונות ה-counter שלך: בחר שמות המציינים בבירור את המטרה והעיצוב של הסגנון (לדוגמה, arabic-indic, upper-roman, georgian).
• שמור על סגנונות ה-counter שלך מודולריים: הגדר סגנונות counter נפרדים עבור שפות ומערכות מספור שונות.
• השתמש במחלקות CSS כדי להחיל סגנונות counter: הימנע מהחלת סגנונות counter ישירות על אלמנטים; במקום זאת, השתמש במחלקות CSS כדי לשלוט בעיצוב.
• בדוק את סגנונות ה-counter שלך ביסודיות: בדוק את סגנונות ה-counter שלך בדפדפנים ומכשירים שונים כדי לוודא שהם מוצגים כהלכה.
• תעד את סגנונות ה-counter שלך: ספק תיעוד ברור עבור סגנונות ה-counter שלך, כולל המטרה, העיצוב והשימוש שלהם.
• תעדוף נגישות: שקול תמיד נגישות בעת יצירת סגנונות counter והשתמש במאפיין speak-as כדי להבטיח שערכי ה-counter מוכרזים כהלכה על ידי קוראי מסך.

מסקנה

סגנונות CSS counter מספקים מנגנון רב עוצמה וגמיש לבינאום העיצוב של תוכן ממוספר באינטרנט. על ידי מינוף הכלל @counter-style ומאפייניו השונים, תוכל ליצור מערכות מספור מותאמות אישית המכבדות את המוסכמות התרבותיות והניואנסים הלשוניים של אזורים שונים. על ידי ביצוע שיטות העבודה המומלצות המתוארות במדריך זה, תוכל להבטיח שסגנונות ה-counter שלך יהיו יעילים, קלים לתחזוקה ונגישים לקהל גלובלי. ככל שפיתוח אתרים ממשיך להתפתח, הבנה וניצול של סגנונות CSS counter לבינאום יהפכו חשובים יותר ויותר ליצירת חוויות אינטרנט כוללניות וידידותיות למשתמש באמת. אמץ את העוצמה של סגנונות CSS counter וצור אתרים המהדהדים עם משתמשים מכל קצוות תבל.

קריאה נוספת

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles